<template>
	<div>
        <mu-tabs :value="activeTab" @change="handleSelect" class="muTabs">
            <mu-tab value="1" title="概况"/>
            <mu-tab value="2" title="待处理"/>
            <mu-tab value="3" title="已完成"/>
            <mu-tab value="4" title="历史记录"/>
        </mu-tabs>
		<div>
			<router-view/>
		</div>
	</div>
</template>

<script>
  export default {
    data() {
      return {
        activeTab: '1'
      };
    },
    methods: {
    	handleSelect(key) {
            this.activeTab = key;
        	switch(parseInt(key)){
        		case 1:
        			this.$router.push('/index')
        			break;
        		case 2:
        			this.$router.push('/task/todo')
        			break;
        		case 3:
        			this.$router.push('/task/complete')
        			break;
        		case 4:
        			this.$router.push('/task/history')
        			break;
        		default: break;
        	}
    	}
    }
  }
</script>